@import "../../themes/index";

:host /deep/ .layout {
  &.fold {
    .sider {
      width: 42px;

      .logo {
        img {
          width: 28px !important;
          margin: 6px 7px;
        }
      }

      :global {
        .ant-menu-root {
          width: 100%;
          overflow: visible;

          & > .ant-menu-item {
            padding: 0;
            text-align: center;

            .anticon {
              font-size: 14px;
              margin-right: 0;
            }
          }

          & > .ant-menu-submenu {
            & > .ant-menu-submenu-title {
              padding: 0;
              text-align: center;

              .anticon {
                font-size: 14px;
                margin-right: 0;
              }

              &::after {
                display: none;
              }
            }
          }
        }
      }
    }

    .main {
      margin-left: 42px;
    }
  }
  .main {
    margin-left: 224px;
    overflow: auto;
    height: 100vh;
    transition: @transition-ease-out;

    :global {
      .content-inner {
        background: #fff;
        padding: 24px;
        box-shadow: @shadow-1;
        min-height: e("calc(100vh - 184px)");
      }
    }

    .container {
      margin: 24px;
    }

    .content {
      min-height: e("calc(100vh - 184px)");
      position: relative;
    }
  }

  .popovermenu {
    width: 280px;
    margin-left: 6px;

    :global .ant-popover-inner-content {
      padding: 0;

      .ant-menu-inline .ant-menu-item,
      .ant-menu-vertical .ant-menu-item {
        border-right: 0;
        height: 48px;
        line-height: 48px;
      }

      .ant-menu-inline .ant-menu-item-selected,
      .ant-menu-inline .ant-menu-selected {
        border-right: 0;
      }
    }
  }

}

.contentInner {
  background: #fff;
  padding: 24px;
  box-shadow: @shadow-1;
  min-height: e("calc(100vh - 184px)");
}

@media (max-width: 767px) {
  .contentInner {
    padding: 12px;
    min-height: e("calc(100vh - 160px)");
  }
}
